.dataset-compliance-diff {
  $requiredWidthForFieldNameColumn: 240px;
  $requiredWidthForActionableItemsColumn: 136px;
  $requiredWidthForFooter: 1125px;
  $pageListHeight: 56px;
  $pageListMinimumHeight: 29px;

  font-size: fs(standard);

  &__container {
    margin-bottom: item-spacing(3);
  }

  &__field-name {
    width: $requiredWidthForFieldNameColumn;
  }

  &__actionable-items {
    width: $requiredWidthForActionableItemsColumn;

    &__btn {
      background: transparent;
      color: get-color(blue5);
      font-weight: bold;
      border: none;
    }
  }

  &__footer {
    &__content {
      display: flex;
      justify-content: space-between;
      width: $requiredWidthForFooter;
    }
  }

  &__page-list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: $pageListHeight;
    overflow: hidden;

    &__item {
      margin-left: item-spacing(1);
      text-align: center;

      &.selected {
        font-weight: 600;
        color: get-color(black);
        box-sizing: border-box;
        padding: item-spacing(1);
        min-width: $pageListMinimumHeight;
        background-color: get-color(slate7, 0.5);
      }
    }

    &__button {
      background: transparent;
      border: none;
      color: get-color(blue5);
    }
  }

  &__next-btn {
    margin-left: auto;
    margin-right: item-spacing(4);

    .fa-chevron-right {
      margin-left: item-spacing(2);
    }
  }

  &__previous-btn {
    margin-right: auto;
    margin-left: item-spacing(4);

    .fa-chevron-left {
      margin-right: item-spacing(2);
    }
  }

  &__next-btn,
  &__previous-btn {
    background: transparent;
    border: none;
    font-weight: 600;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.25;
    }
  }
}
